<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药价查询</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="/img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="/element/element-ui.css">
</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20" v-loading="loading">
                            <!--右边卡片-->
                            <el-card shadow="hover">
                                <el-col span="7">
                                    <el-autocomplete

                                            style="width: 100%;"
                                            v-model="keyword"
                                            :fetch-suggestions="querySearch"
                                            placeholder="输入药物名或关键字"
                                            :trigger-on-focus="false"
                                            @select="handleSelect"
                                            clearable>
                                           <!-- @change="handleChange"-->
                                   </el-autocomplete>
                                </el-col>
                                <el-col span="1">
                                    <el-button type="primary" @click="search()" icon="el-icon-search"></el-button>
                                </el-col>
                                <el-col offset="1" span="6">
                                    <span style="line-height: 20px">查询选项：</span>
                                    <el-radio v-model="searchItem" label="1" border>药物</el-radio>
                                    <el-radio v-model="searchItem" label="2" border>症状</el-radio>
                                </el-col>
                                <el-col>
                                    <!--分割线-->
                                    <el-divider></el-divider>
                                </el-col>
                                <el-col style="margin-top: 0;">

                                    <el-row gutter="10">
                                        <el-scrollbar class="scrollbar">
                                            <!--全部药品数据-->
                                            <el-col span="12" v-show="selectShow" v-for="d in drug"
                                                    style="margin-bottom: 10px;">
                                                <el-card class="box-card" style="width: 600px;height: 250px">
                                                    <el-descriptions :title="d.drugName" border column="4">
                                                        <el-descriptions-item label="国药准字">{{d.drugNo}}</el-descriptions-item>
                                                        <el-descriptions-item label="单位">{{d.unit}}</el-descriptions-item>
                                                        <el-descriptions-item label="价格">{{d.unitprice}}</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-if="d.usage===1">内服</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-else-if="d.usage===2">外服</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-else>注射</el-descriptions-item>
                                                        <!--描述60字以内-->
                                                        <el-descriptions-item label="备注" v-if="d.remark.length>=60">{{d.remark.substring(0, 60)}}...</el-descriptions-item>
                                                        <el-descriptions-item label="备注" v-else>{{d.remark}}</el-descriptions-item>
                                                    </el-descriptions>
                                                </el-card>
                                            </el-col>
                                            <!--指定药品数据-->
                                            <el-col span="12" v-show="searchShow" v-for="drug in searchData"
                                                    style="margin-top: 20px;">
                                                <el-card class="box-card" style="width: 600px;height: 250px">
                                                    <el-descriptions :title="drug.drugName" border column="4">
                                                        <el-descriptions-item label="国药准字">{{drug.drugNo}}</el-descriptions-item>
                                                        <el-descriptions-item label="单位">{{drug.unit}}</el-descriptions-item>
                                                        <el-descriptions-item label="价格">{{drug.unitprice}}</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-if="drug.usage===1">内服</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-else-if="drug.usage===2">外服</el-descriptions-item>
                                                        <el-descriptions-item label="使用方式" v-else>注射</el-descriptions-item>
                                                        <el-descriptions-item label="备注" v-if="drug.remark.length>=60">{{drug.remark.substring(0, 60)}}...</el-descriptions-item>
                                                        <el-descriptions-item label="备注" v-else>{{drug.remark}}</el-descriptions-item>
                                                    </el-descriptions>
                                                </el-card>
                                            </el-col>
                                            <!--搜索的数据不存在-->
                                            <el-col span="24" v-show="v.searchData.length===0&&v.searchShow===true">
                                                <el-empty description="找不到您要的药品！"></el-empty>
                                            </el-col>
                                        </el-scrollbar>
                                    </el-row>

                                </el-col>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>

</div>
</body>
<!-- 引入Vue和Element UI库 -->
<script src="/js/vue.js"></script>
<script src="/element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="/js/axios.js"></script>
<!--引入自定义header-->
<script src="/js/index-header.js"></script>
<!--引入自定义footer-->
<script src="/js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="/js/index-left-card.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                drug: [],
                restaurants: [],
                //搜索关键字
                keyword: '',
                drugNum: 0,
                loading: true,
                //抽屉
                drawer: false,
                direction: 'rtl',
                //默认数据状态
                selectShow: true,
                //查询状态
                searchShow: false,
                searchData: [],
                //查询分类
                searchItem: '1'
            }
        },
        methods: {
            querySearch(queryString, cb) {
                let restaurants = this.restaurants;
                let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.indexOf(queryString) !== -1);
                };
            },
            //点击搜索框推荐值 显示内容
            handleSelect(item) {
                console.log(item)
                //清空上次搜索数据
                v.searchData = [];
                for (let i = 0; i < v.drug.length; i++) {
                    if (v.drug[i].id === item.id) {
                        v.searchData.push(v.drug[i]);
                        v.searchShow = true;
                        v.selectShow = false;
                    }
                }
            },
            //加载药品全面信息
            selectDrug() {
                axios.get("/pa/drug").then(function (res) {
                    if (res.data.code === 1) {
                        v.drug = res.data.data;
                        v.loadSearchData();
                        v.loading = false;
                        return;
                    }
                    v.$message.error("药品信息加载失败！")
                })
            },
            //搜索框加载数据
            loadSearchData() {
                for (let i = 0; i < v.drug.length; i++) {
                    let name = v.drug[i].drugName;
                    let id = v.drug[i].id;
                    let loadSearchData = {value: "", id: ""}
                    loadSearchData.value = name;
                    loadSearchData.id = id;
                    v.restaurants.push(loadSearchData);
                }
            },
            //选择药品
            handleChange(value) {
                console.log("选择了:" + value);
            },
            //搜索药品
            search() {
                console.log("点击了搜索按钮,关键字："+v.keyword);
                v.searchData = [];
                //开启搜索展示
                v.searchShow = true;
                //关闭默认展示
                v.selectShow = false;
                for (let i = 0; i < v.restaurants.length; i++) {
                    if (v.searchItem === '2') {
                        if (v.drug[i].remark.indexOf(v.keyword) !== -1) {
                            v.searchData.push(v.drug[i]);
                        }
                    } else {
                        if (v.drug[i].drugName.indexOf(v.keyword) !== -1) {
                            v.searchData.push(v.drug[i]);
                        }
                    }
                }
                //提示搜索为空
                if (v.searchData.length===0){
                    this.$message('暂未找您搜索的药品信息,请试试其他关键字。');
                }
            }
        },
        mounted() {
            console.log(this.drug)
        },
        //页面渲染之前进行调用
        created() {
            this.selectDrug();
        },
        //搜索输入框
        watch: {
            keyword(newValue, oldValue) {
                if (newValue === "" || newValue === null) {
                    v.selectShow = true;
                    v.searchShow = false;
                }
            }
        }
    })
</script>
</html>